<template>
  <div id="renting">
      <a class="renting_for" v-for="(i, index) in rentingList" :key="index" @click.stop="skip(index)">
        <img :src="i.img">
      </a>
  </div>
</template>
<script>
export default {
  data () {
    return {
      rentingList: [
      // 我要租房 二级页面
        {
          url: '/brandApartment',
          img: require('@/images/secondPage/jigou.png'),
          title: '机构房源',
          descript: '精品房源，更精彩'
        },
        {
          url: '/rentList',
          img: require('@/images/secondPage/geren.png'),
          title: '个人房源',
          descript: '各类选择，任你选'
        },
        {
          url: 'javascript:',
          img: require('@/images/secondPage/gongzu.png'),
          title: '公租房源',
          descript: '政府便民，有保障',
          tip: '暂无数据'
        },
        {
          url: 'javascript:',
          img: require('@/images/secondPage/rencai.png'),
          title: '人才房源',
          descript: '人才首选，任你选',
          tip: '暂无数据'
        }
      ]
    }
  },
  methods: {
    skip (index) {
      index > 1 ? this.$vux.toast.text(this.rentingList[index].tip) : this.$router.push(this.rentingList[index].url)
      return false
    }
  }
}
</script>
<style lang="less" scoped>
html,body{
  width: 100%;
  height:100%;
}
#renting{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top:0;
  overflow-x:auto;
  background: #f5f5f5;
  width: 100%;
  height:100%;
  background-color: rgb(245,245,245);
  .renting_for{
    position: relative;
    display:block;
    width:17.25rem;
    height:6rem;
    margin-bottom:0.5rem;
    padding-left:0.75rem;
    padding-right:0.75rem;
    img{
      width: 100%;
      height: 100%;
    }
  }
}
.renting_for:nth-child(1) {
  padding-top:1.25rem;
}
</style>
